<template>
  <button @click="triggerClick"
    :class="['el-button',
     {[`el-button_${size}`]: ['small', 'mini'].indexOf($props.size) > -1 },
     `el-button_${type}`,
      {'isRound': $attrs.round !== undefined},
      {'isCircle': $attrs.circle !== undefined},]">
    <span>
      <slot></slot>
    </span>

  </button>
</template>

<script>
export default {
  name: 'el-button',
  props: {
    size: {
      type: String,
      default: 'small',
      validator: value => ['medium', 'small', 'mini'].indexOf(value) > -1,
    },
    type: {
      type: String,
      required: true,
      default: 'primary',
      validator: value => ['primary', 'success', 'warning', 'danger'].indexOf(value) > -1,
    },
  },
  methods: {
    triggerClick() {
      this.$emit('click');
    },
  },
  mounted() {
    console.log(this.$attrs);
  },
};
</script>

<style lang="scss" scoped>
  $primary: #409EFF;
  $success: #67C23A;
  $warning: #E6A23C;
  $danger: #F56C6C;
  $info: #909399;
  $medium: 17px;
  $small: 15px;
  $mini: 12px;
  .el-button{
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 0 1.2em;
    text-align: center;
    color: #333;
    outline: none;
    cursor: pointer;
  }
  .el-button_medium{
    line-height: 2.4em;
    font-size: $medium;
  }
  .el-button_small{
    line-height: 2.4em;
    font-size: $small;
  }
  .el-button_mini{
    line-height: 2.4em;
    font-size: $mini;
  }
  .el-button_primary{
    background: $primary;
    color: #fff;
    border-color: $primary;
    &:hover{
      background: $primary*1.07;
    }
    &:active{
      background: $primary/1.1;
    }
  }
  .el-button_success{
    background: $success;
    color: #fff;
    border-color: $success;
    &:hover{
      background: $success*1.07;
    }
    &:active{
      background: $success/1.1;
    }
  }
  .el-button_warning{
    background: $warning;
    color: #fff;
    border-color: $warning;
    &:hover{
      background: $warning*1.07;
    }
    &:active{
      background: $warning/1.1;
    }
  }
  .el-button_danger{
    background: $danger;
    color: #fff;
    border-color: $danger;
    &:hover{
      background: $danger*1.1;
    }
    &:active{
      background: $danger/1.1;
    }
  }
  .isRound{
    border-radius: 1.2em;
  }
  .isCircle{
    padding: 0 .7em;
    border-radius: 50%;
    span{
      display: inline-block;
      width: 1em;
      height: 1em;
    }
  }
</style>
<!-- eslint-disable -->
<!--
参数	        说明	         类型	  可选值	                                            默认值
size	      尺寸	        string	medium / small / mini	                              —
type	      类型	        string	primary|success|warning|danger|info|text	          —
plain	    是否朴素按钮	  boolean	—	                                                false
round	    是否圆角按钮	  boolean	—	                                                false
circle	  是否圆形按钮	  boolean	—	                                                false
loading	  是否加载中状态 	boolean	—	                                                false
disabled	是否禁用状态	  boolean	—	                                                false
-->
